<template>

  <div>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @select-changed="handleSelected"
    >
      <template #filter-content>

        <el-input v-model="listQuery.params.realName" placeholder="搜索人员" style="width: 200px;" class="filter-item" size="small" />
        <depart-tree-select v-model="listQuery.params.deptCode" class="filter-item" style="width: 200px;" placeholder="搜索部门" />
        <dic-list-select v-model="listQuery.params.passState" dic-code="exam_pass_state" class="filter-item" placeholder="通过状态" />
        <el-button v-permission="['exam:detail:record:export']" type="primary" size="small" icon="el-icon-download" class="filter-item" @click="handleExport">导出概览</el-button>
        <el-button type="danger" size="small" icon="el-icon-box" class="filter-item" @click="handleExportZip">打包导出试卷</el-button>
      </template>

      <template #data-columns>

        <el-table-column
          label="排名"
          prop="rank"
          align="center"
          width="100px"
        />

        <el-table-column
          label="账号"
          prop="userName"
          align="center"
        />

        <el-table-column
          label="姓名"
          prop="realName"
          align="center"
        />

        <el-table-column
          label="考试次数"
          prop="examCount"
          align="center"
        />

        <el-table-column
          label="分数"
          prop="maxScore"
          align="center"
        />

        <el-table-column
          label="是否通过"
          align="center"
        >
          <template v-slot="scope">

            <span v-if="scope.row.examCount===0" style="color: #ff0000;">缺考</span>
            <span v-else-if="scope.row.passed" style="color: #00ff00;">通过</span>
            <span v-else style="color: #ff0000;">未通过</span>
          </template>

        </el-table-column>

        <el-table-column
          label="操作"
          fixed="right"
          align="center"
        >
          <template v-slot="scope">
            <el-link v-permission="['exam:detail:paper:list']" :disabled="scope.row.examCount===0" type="primary" icon="el-icon-tickets" @click="showPaper(scope.row.userId)">考试记录</el-link>
            <el-link v-permission="['exam:detail:record:download']" :disabled="scope.row.examCount===0" style="margin-left: 10px" type="primary" icon="el-icon-download" @click="handleExportPdf(scope.row)">下载</el-link>
          </template>

        </el-table-column>

      </template>

    </data-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="考试记录"
      width="80%"
      @close="dialogVisible = false"
    >
      <exam-record :exam-id="listQuery.params.examId" :user-id="userId"/>
    </el-dialog>

  </div>

</template>

<script>
import { apiExportUser } from '@/api/stat/exam'
import { exportPdf, exportZip } from '@/api/paper/paper'
import ExamRecord from '@/views/admin/exam/exam/record/index.vue'
import permission from '@/directive/permission'
import DepartTreeSelect from '@/components/DepartTreeSelect/index.vue'
import DicListSelect from '@/components/DicListSelect/index.vue'

export default {
  directives: { permission },
  components: { DicListSelect, DepartTreeSelect, ExamRecord },
  data() {
    return {

      dialogVisible: false,
      userId: '',

      listQuery: {
        current: 1,
        size: 10,
        params: {
          examId: '',
          realName: '',
          passState: null,
          deptCode: null
        }
      },

      options: {
        // 可批量操作
        multi: true,
        // 列表请求URL
        listUrl: '/api/stat/exam/user-paging',
        keyId: 'userId'
      },

      // 导出的ID列表
      userIds: []
    }
  },

  watch: {
    // 关闭刷新页面
    dialogVisible: {
      handler(val) {
        if (!val) {
          this.reload()
        }
      }
    }
  },

  created() {
    this.listQuery.params.examId = this.$route.query.examId
  },
  methods: {

    // 开始考试
    showPaper(userId) {
      this.userId = userId
      this.dialogVisible = true
    },

    // 选定
    handleSelected(obj) {
      this.userIds = obj.ids
    },

    // 导出数据
    handleExport() {
      apiExportUser(this.listQuery.params)
    },

    // 导出ZIP包
    handleExportZip() {
      const params = JSON.parse(JSON.stringify(this.listQuery.params))
      if (this.userIds.length > 0) {
        params['userIds'] = this.userIds
      }
      exportZip(params).then(() => {
        this.$message.success('打包任务已发送，下载地址将通过站内信下发，请留意消息提醒！')
      })
    },

    // 导出PDF
    handleExportPdf(data) {
      const fileName = this.listQuery.params.examId + '-' + data.realName + '-' + data.userName + '.pdf'
      const params = JSON.parse(JSON.stringify(this.listQuery.params))
      params.userIds = [data.userId]
      exportPdf(params, fileName)
    },

    // 刷新页面
    reload() {
      this.$refs.pagingTable.getList()
    }
  }
}
</script>

<style scoped>

.el-dialog-div{
  height: 60vh;
  overflow: auto;
  padding: 10px;
}

</style>
